<template>
    <div v-if="peopleList" class="chart_content pd_20">
        <zt-echart :opts="opts"></zt-echart>
    </div>
</template>

<script setup lang="ts">
import { ZtEchart } from "@ztstory/datav-core";
import type { CountDateItem } from "@/model/model";
import { DateUtils } from "@ztstory/datav-core/src/utils/date.util";
import { createBarOpts, createBarSeriesItem, createGradientColors, createLineOpts, createLineSeriesItem } from "@ztstory/datav-core/echarts-opts";

import { computed } from "vue";

interface Props {
    peopleList?: CountDateItem[];
}

const props = defineProps<Props>();

const opts = computed(() => {
    // const categorys: string[] = [];
    // const values: string[] = [];

    // props.peopleList?.forEach((item) => {
    //     categorys.push(DateUtils.string2string(item.dateFormat, "YYYY-MM-DD", "M.DD"));
    //     values.push(item.count);
    // });

    // const barOpts = createBarOpts([createGradientColors(["#E6AE28", "#FF8A00"])], categorys);

    // barOpts.series = [createBarSeriesItem(values)];

    // return barOpts;
    const categorys: string[] = [];

    for (let i = 0; i < 7; i++) {
        categorys.push(DateUtils.string2string(DateUtils.date2String(DateUtils.subtract(new Date(), i, "day"), "YYYY-MM-DD"), "YYYY-MM-DD", "M.DD"));
    }

    const barOpts = createLineOpts([createGradientColors(["#E6AE28", "#FF8A00"])], categorys, 38);

    barOpts.series = [createLineSeriesItem([52, 61, 48, 59, 65, 54, 63])];

    return barOpts
});
</script>

<style scoped lang="less">
.chart_content {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}
</style>
